<template>
  <div class="login_wrap">
    <div class="login_denglu">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <!-- <el-input v-model="form.password"></el-input> -->
          <el-input
            placeholder="请输入密码"
            v-model.trim="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :plain="true" @click="onLogin"
            >登录</el-button
          >
          <el-button type="primary" @click="goRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
      },
    };
  },
  methods: {
    onLogin() {
      console.log("登录");
      // console.log(this.form.name, this.form.password);
      // 在登录当中触发actions当中的login_a方法
      this.$store.dispatch("login_a", {
        user_name: this.form.name,
        password: this.form.password,
        routerT: this.$router, //将$router 传递给actions login_a
      });

      // 当我们登录成功之后跳转进入主页 使用编程式路由导航进行跳转
      // dispatch--->actions(login_a)在login_a当中登录的ajax发送请求（actions当中无$router）
      // 当dispatch成功之后再进行跳转  dispatch是一个promise对象 异步变为同步 async await 断掉了逻辑不通
      // 确认登录成功之后 actions 返回result 有登录成功的判断条件 但是没有$router  你一定要知道$router在vue实例对象上存在或者组建对象上  dispatch可以往actions进行传值
      //  才可以使用编程时路由导航进行跳转
    },
    goRegister() {
      // 点击注册按钮跳转到注册页面
      console.log("去注册页面");
      this.$router.push({
        name: "register",
      });
    },
  },
};

/* 
vuex创建的步骤
下载vuex@3.6.2
创建vuex  store.js 或者 store  index.js
再在vuex（store）文件夹中创建 state mutations actions getters对象
在入口文件main.js当中引入注册vuex中store对象   $store




*/
</script>

<style lang="scss" scoped>
.login_wrap {
  background-image: url("~@a/img/bggrey.jpg");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_denglu {
    // 目的：让注册框水平垂直居中
    // background-color: red;
    background-image: url("~@a/img/bggrey.jpg");
    background-size: 100% 100%;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>